<template>
  <div class="upload-box">
    <el-upload
      action="#"
      list-type="picture-card"
      :http-request="uploadFn"
      :limit="1"
      :file-list="fileList"
      :class="{disable:fileList.length>0}"
      :on-remove="removeFn"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <!-- 进度条：当开始上传且未上传完成之前 显示 -->
    <el-progress v-if="percent>0&&percent<100" type="circle" :percentage="percent" />
  </div>
</template>

<script>
// 初始化 COS 服务
import COS from 'cos-js-sdk-v5'

var cos = new COS({
  SecretId: 'AKIDIOEn43wXsvhBNHvHNCj13oGSMzKOAfsn',
  SecretKey: '5ybTHtEJAML4XkgLinb7NLddMoyrTozt'
})
export default {
  data() {
    return {
      fileList: [],
      percent: 0
    }
  },
  methods: {
    // 图片上传
    uploadFn(data) {
      // data: 上传的文件对象
    //   console.log(21, data)
    // 优化头像上传
      this.fileList = [
        { url: '' } // 目的：控制上传文件按钮 立刻消失
      ]
      cos.putObject({
        Bucket: 'hr-project-80-1308586717', /* 必须 */
        Region: 'ap-guangzhou', /* 存储桶所在地域，必须字段 */
        Key: Date.now().toString(), /* 必须 */
        StorageClass: 'STANDARD',
        Body: data.file, // 上传文件对象
        onProgress: (progressData) => {
        //   console.log(JSON.stringify(progressData))
        // 设置进度
          this.percent = progressData.percent * 100
        }
      }, (err, data) => {
        // 箭头函数本身是没有this，因此在箭头函数中使用this的时候，是指向本身
        // 如果这里写的是普通函数，则指向undefined
        console.log(38, err, data)
        if (!err) {
          // 图片上传成功
        //   this.fileList.push({
        //     url: 'https://' + data.Location
        //   })
          this.fileList[0].url = 'https://' + data.Location
        }
      })
    },
    // 点击删除头像
    removeFn() {
      this.fileList = []
    }
  }
}
</script>

<style lang="scss" scoped>
.upload-box{
    display: inline-block;
    position: relative;
    // 样式穿透
    .disable{
        ::v-deep .el-upload--picture-card{
            display: none;
        }
    }
    .el-progress{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
    }

}
</style>
